import React, { ReactNode } from 'react';
import { 
  SafeAreaView, 
  StyleSheet, 
  View, 
  StatusBar, 
  ViewStyle, 
  StyleProp,
  Platform 
} from 'react-native';
import { scale, Screen } from '../utils/ResponsiveUI';

interface ResponsiveContainerProps {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
  safeArea?: boolean;
  statusBarColor?: string;
  statusBarStyle?: 'default' | 'light-content' | 'dark-content';
  translucent?: boolean;
}

/**
 * 响应式容器组件 - 用于包装页面组件，自动处理状态栏、安全区域以及响应式布局
 */
const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
  children,
  style,
  safeArea = true,
  statusBarColor = 'transparent',
  statusBarStyle = 'dark-content',
  translucent = true,
}) => {
  // 创建容器样式
  const containerStyles = [
    styles.container,
    // Android设备且启用透明状态栏时，添加状态栏高度的padding
    Platform.OS === 'android' && translucent && {
      paddingTop: Screen.statusBarHeight
    },
    style,
  ];

  // 根据是否需要安全区域选择容器组件
  const Container = safeArea ? SafeAreaView : View;

  return (
    <>
      <StatusBar
        backgroundColor={statusBarColor}
        barStyle={statusBarStyle}
        translucent={translucent}
      />
      <Container style={containerStyles}>
        {children}
      </Container>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
});

export default ResponsiveContainer; 